בהכנה למצבי התצוגה של מחר

אפליקציות PWA יכולות להשתמש במאפיין display_override כדי לטפל במצבי תצוגה מיוחדים.

Thomas Steiner

מניפסט של אפליקציית אינטרנט הוא קובץ JSON שמספר לדפדפן על אפליקציית האינטרנט המתקדמת (PWA) ואיך היא אמורה לפעול כשהיא מותקנת במחשב או במכשיר הנייד של המשתמש. באמצעות הנכס display, אפשר להתאים אישית את ממשק המשתמש של הדפדפן שיוצג כשהאפליקציה מופעלת. לדוגמה, אפשר להסתיר את סרגל הכתובות ואת מסגרת הדפדפן. אפשר אפילו להגדיר משחקים כך שיופעלו במסך מלא. לסיכום, בהמשך מפורטים מצבי התצוגה שצוינו בזמן כתיבת המאמר הזה.

נכס שימוש
fullscreen פתיחת אפליקציית האינטרנט ללא ממשק משתמש של דפדפן, שתופסת את כל אזור התצוגה הזמין.
standalone פתיחת אפליקציית האינטרנט כך שהיא נראית ומתנהגת כמו אפליקציה עצמאית. האפליקציה פועלת בחלון נפרד משלה, בנפרד מהדפדפן, ומסתירה רכיבי ממשק משתמש רגילים של הדפדפן, כמו סרגל כתובות ה-URL.
minimal-ui המצב הזה דומה למצב standalone, אבל הוא מספק למשתמש קבוצה מינימלית של רכיבי ממשק משתמש לצורך שליטה בניווט (כמו 'חזרה' ו'טעינה מחדש').
browser חוויית שימוש רגילה בדפדפן.

מצבי התצוגה האלה פועלים לפי שרשרת גיבוי מוגדרת היטב ("fullscreen" → "standalone" → "minimal-ui" → "browser"). אם דפדפן לא תומך במצב מסוים, הוא עובר למצב התצוגה הבא בשרשרת.

נקודות חולשה של הנכס display

יש שלוש בעיות בגישה הזו של שרשרת חלופית מובנית:

  • מפתח לא יכול לבקש "minimal-ui" בלי שהוא יועבר בכפייה חזרה למצב התצוגה "browser", במקרה ש"minimal-ui" לא נתמך בדפדפן נתון.
  • למפתחים אין אפשרות לטפל בהבדלים בין דפדפנים, למשל אם הדפדפן כולל או לא כולל לחצן חזרה בחלון של מצב "standalone".
  • בגלל ההתנהגות הנוכחית, אי אפשר להציג מצבי תצוגה חדשים באופן תואם לאחור, כי לניתוח כמו מצב אפליקציה עם כרטיסיות אין מקום טבעי בשרשרת האלטרנטיבות.

הנכס display_override

הבעיות האלה נפתרות באמצעות המאפיין display_override, שהדפדפן מתייחס אליו לפני המאפיין display. הערך שלו הוא רצף של מחרוזות שנחשבות בסדר, והוא מפעיל את מצב התצוגה הנתמך הראשון. אם אף אחת מהן לא נתמכת, הדפדפן חוזר להערכת השדה display.

בדוגמה הבאה, שרשרת החזרה למצב ברירת המחדל של תצוגת המודעה תיראה כך. (פרטי "window-controls-overlay" לא נכללים במאמר הזה).

  1. "window-controls-overlay" (קודם, כדאי לעיין במאמר display_override).
  2. "minimal-ui"
  3. "standalone" (כשהקצבה של display_override תיגמר, תתבצע הערכה של display).
  4. "minimal-ui" (לבסוף, משתמשים בשרשרת הגיבוי display).
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

כדי לשמור על תאימות לאחור, כל מצב תצוגה עתידי יהיה קביל רק כערך של display_override, אבל לא של display. בדפדפנים שלא תומכים ב-display_override, המערכת תשתמש בנכס display ותתעלם מ-display_override כמאפיין לא ידוע של מניפסט של אפליקציית אינטרנט.

תודות

המאפיין display_override הוגדר על ידי Daniel Murphy.